
<template>
    <div class="activity-section">
      <div class="section-header">
        <h2>志愿活动</h2>
        <div class="tab-switch">
          <button 
            v-for="(tab, index) in tabs" 
            :key="index"
            :class="{ active: activeTab === index }"
            @click="switchTab(index)"
          >
            {{ tab }}
          </button>
        </div>
      </div>
  
      <transition-group name="fade" tag="div" class="activity-container">
        <div v-for="activity in filteredActivities" 
             :key="activity.id"
             class="activity-card"
             @click="$emit('show-detail', activity)">
          <div class="activity-banner" :style="{ background: activity.color }"></div>
          <div class="activity-content">
            <h3>{{ activity.title }}</h3>
            <p class="time">📅 {{ activity.date }} | ⏱️ {{ activity.duration }}小时</p>
            <div class="activity-footer">
              <span class="status-tag" :class="activity.status">
                {{ getStatusText(activity.status) }}
              </span>
              <span class="participants">👥 {{ activity.available }}/{{ activity.capacity }}人</span>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeTab: 0,
        tabs: ['全部', '进行中', '即将开始', '已结束'],
        activities: [
          {
            id: 1,
            title: '校园环保日志愿活动',
            date: '2025-06-05',
            duration: 4,
            status: 'ongoing',
            available: 12,
            capacity: 30,
            color: 'linear-gradient(135deg, #a8e063, #56ab2f)'
          },
          // 更多活动数据...
        ]
      }
    },
    computed: {
      filteredActivities() {
        if (this.activeTab === 0) return this.activities
        const statusMap = ['', 'ongoing', 'upcoming', 'ended']
        return this.activities.filter(a => a.status === statusMap[this.activeTab])
      }
    },
    methods: {
      switchTab(index) {
        this.activeTab = index
      },
      getStatusText(status) {
        const map = {
          ongoing: '进行中',
          upcoming: '即将开始',
          ended: '已结束'
        }
        return map[status] || ''
      }
    }
  }
  </script>
  
  <style scoped>
  .activity-section {
    padding: 15px;
  }
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .tab-switch button {
    padding: 5px 12px;
    margin-left: 8px;
    border: none;
    background: #f0f0f0;
    border-radius: 15px;
    cursor: pointer;
  }
  .tab-switch button.active {
    background: #4CAF50;
    color: white;
  }
  .activity-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
  }
  .activity-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
  }
  .activity-card:hover {
    transform: translateY(-5px);
  }
  .activity-banner {
    height: 120px;
    background-size: cover;
  }
  .activity-content {
    padding: 12px;
  }
  .time {
    color: #666;
    font-size: 13px;
    margin: 8px 0;
  }
  .activity-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .status-tag {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
  }
  .status-tag.ongoing {
    background: #e8f5e9;
    color: #4CAF50;
  }
  .status-tag.upcoming {
    background: #fff3e0;
    color: #ff9800;
  }
  .status-tag.ended {
    background: #f5f5f5;
    color: #9e9e9e;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  </style>
  